<template>
    <div id="detail-camera-equipment">
        <el-dialog
            title="摄像头设备详情"
            v-model="isShowDialog" 
            draggable 
            :close-on-click-modal="false" 
            width="50%" 
            :destroy-on-close="true"
            @close="handleClose"
        >
        <el-descriptions :column="2" size="large" border>
            <el-descriptions-item
                label="设备名称"
                label-align="right"
                align="center"
                label-class-name="my-label"
                class-name="my-content"
            >{{ item.v_Name}}</el-descriptions-item>
            
            <el-descriptions-item label="品牌名称" label-align="right" align="center" label-class-name="my-label" class-name="my-content">
                {{item.v_BrandName}}
            </el-descriptions-item>

            <el-descriptions-item label="监控区域" label-align="right" align="center" label-class-name="my-label" class-name="my-content">
                {{item.v_Region}}
            </el-descriptions-item>

            <el-descriptions-item label="状态" label-align="right" align="center" label-class-name="my-label" class-name="my-content">
                <el-tag v-if="item.n_Status == 0" size="small">未注册</el-tag>
                <el-tag v-else-if="item.n_Status == 1" size="small">在线</el-tag>
                <el-tag v-else-if="item.n_Status == 2" size="small">离线</el-tag>
                <el-tag v-else-if="item.n_Status == 3" size="small">禁用</el-tag>
                <el-tag v-else size="small">非法状态</el-tag>
            </el-descriptions-item>

            <el-descriptions-item label="第三方设备ID" label-align="right" align="center" label-class-name="my-label" class-name="my-content">
                {{item.extraInfo.id}}
            </el-descriptions-item>

            <el-descriptions-item label="设备国标编码" label-align="right" align="center" label-class-name="my-label" class-name="my-content">
                {{item.extraInfo.code}}
            </el-descriptions-item>

            <el-descriptions-item label="类型" label-align="right" align="center" label-class-name="my-label" class-name="my-content">
                <el-tag v-if="item.extraInfo.type == 1" size="small">IPC</el-tag>
                <el-tag v-else-if="item.extraInfo.type == 2" size="small">NVR</el-tag>
                <el-tag v-else size="small">非法类型</el-tag>
            </el-descriptions-item>

            <el-descriptions-item label="设备流传输协议" label-align="right" align="center" label-class-name="my-label" class-name="my-content">
                <el-tag v-if="item.extraInfo.transportProtocol == 1" size="small">UDP</el-tag>
                <el-tag v-else-if="item.extraInfo.transportProtocol == 2" size="small">TCP</el-tag>
                <el-tag v-else size="small">非法传输协议</el-tag>
            </el-descriptions-item>

            <el-descriptions-item label="接入协议" label-align="right" align="center" label-class-name="my-label" class-name="my-content">
                <el-tag v-if="item.extraInfo.accessProtocol == 1" size="small">RTMP</el-tag>
                <el-tag v-else-if="item.extraInfo.accessProtocol == 2" size="small">GB</el-tag>
                <el-tag v-else-if="item.extraInfo.accessProtocol == 3" size="small">GW</el-tag>
                <el-tag v-else size="small">非法接入协议</el-tag>
            </el-descriptions-item>

            <el-descriptions-item label="服务节点名称" label-align="right" align="center" label-class-name="my-label" class-name="my-content">
                {{item.extraInfo.clusterName}}
            </el-descriptions-item>

            <el-descriptions-item label="sip服务ID" label-align="right" align="center" label-class-name="my-label" class-name="my-content">
                {{item.extraInfo.sipId}}
            </el-descriptions-item>

            <el-descriptions-item label="sip服务域" label-align="right" align="center" label-class-name="my-label" class-name="my-content">
                {{item.extraInfo.sipDomain}}
            </el-descriptions-item>

            <el-descriptions-item label="sip服务IP地址" label-align="right" align="center" label-class-name="my-label" class-name="my-content">
                {{item.extraInfo.sipIp}}
            </el-descriptions-item>

            <el-descriptions-item label="sip服务端口" label-align="right" align="center" label-class-name="my-label" class-name="my-content">
                {{item.extraInfo.sipPort}}
            </el-descriptions-item>

            <el-descriptions-item label="设备密码" label-align="right" align="center" label-class-name="my-label" class-name="my-content">
                {{item.extraInfo.password}}
            </el-descriptions-item>

            <el-descriptions-item label="排序号" label-align="right" align="center" label-class-name="my-label" class-name="my-content">
                <el-tag size="small">{{item.n_Sort}}</el-tag>
            </el-descriptions-item>
           
            
            <el-descriptions-item label="备注" label-align="right" align="center" label-class-name="my-label" class-name="my-content" span="2">
                {{item.v_Remark}}
            </el-descriptions-item>
                
        </el-descriptions>
            <template #footer>
                <el-button @click="handleClose">关闭</el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
import { ElButton, ElDialog, ElDescriptions, ElDescriptionsItem } from 'element-plus'
import { CameraDetail } from '/@/api/its/camera'
import { useDropdownData, useItemDetail } from '../hooks/index'
import {DetailItemType, ExtraInfoType } from '../types/cameraType'
import { ItemType } from '/@/types/its/ItsType'

export default defineComponent( {
    name: 'detail-camera-equipment',
    props: {
        isShowDialog:{
            type: Boolean,
            default: false,
        },
        item: {
            type: Object as () => ItemType,
            default: null,
        }
    },
    setup(props,ctx){

        const item = ref<DetailItemType>({
            extraInfo: {} as ExtraInfoType
        } as DetailItemType)
        
        /*** handleClose 关闭按钮点击事件 */
        const handleClose = () => {
            closeEvent()
        }

        /*** closeEvent 取消事件 */
        const closeEvent = () => {
            ctx.emit('close')
        }

        //智能计算平台组织机构下拉菜单
        const { n_TransportProtocolOption } = useDropdownData()

        //获取详情
        const getDetail = async () => {
            try {
                let res = await CameraDetail({id: props.item.n_Id})
                if (res && res.data) {
                    item.value = res.data
                }
            }catch(err) {
                ctx.emit('close')
            }
        }

        onMounted(async () => {
            await getDetail()
        })

        return {
            handleClose,
            n_TransportProtocolOption,
            item
        }
    },
} )
</script>
<style scoped lang="scss">
#detail-camera-equipment{
    :deep(.el-select){
        width: 100%;
    }
    :deep(.el-input){
        width: 100%;
    }
}
</style>